<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" value="0">
    <button id="start">开始</button>
    <!-- disabled:禁用，只能用于表单元素（button\input\textarea\select） -->
    <button id="pause" disabled>暂停</button>
    <button id="reset">重置</button>


    <script>
        let input=document.getElementsByTagName("input")[0];
        let start=document.getElementById("start");
        let pause=document.getElementById("pause");
        let reset=document.getElementById("reset");
        let stop;//用于接受间歇调用的返回值，方便停止间歇调用
        // 1.点击开始按钮，开始计时器
        start.onclick=function(){
            stop=setInterval(function(){
                input.value++;
            },1000);

            start.disabled=true;//开始按钮禁止使用
            pause.disabled=false;//暂停按钮可以使用
            reset.disabled=true;//重置按钮禁止使用

        }
        // 2.点击暂停按钮，停止计时器
        pause.onclick=function(){
            clearInterval(stop);
            start.disabled=false;//开始按钮可以使用
            pause.disabled=true;//暂停按钮禁止使用
            reset.disabled=false;//重置按钮可以使用

        }

        // 3.点击重置按钮，数字清零
        reset.onclick=function(){
            input.value=0;
        }



    </script>
</body>
</html>